<template>
  <div>
    <ElSelect v-model="province" value-key="pid" @change="linkQuery" v-loading="loading">
      <ElOption v-for="d in list" :key="d.pid" :value="d" :label="d.province"></ElOption>
    </ElSelect>

    <ElSelect v-model="city" value-key="cid" v-loading="loading">
      <ElOption v-for="d in linklist" :key="d.cid" :value="d" :label="d.city"></ElOption>
    </ElSelect>

    <span> 结果：{{ province.province }}-{{ city.city }} </span>
  </div>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElMessage, ElSelect, ElOption } from 'element-plus'
import { ApiService } from '../../ts/ApiService'
import { BaseDataResult } from '../../ts/types/BaseResult'
import { TbProvince, TbCity } from '../../ts/types/Link'

const loading = ref(false)
//#endregion

//#region 省份查询
const list = ref([] as Array<TbProvince>)
const province = ref({} as TbProvince)
const query = () => {
  loading.value = true
  ApiService.get('/link/provinces', {}, (data: BaseDataResult<Array<TbProvince>>) => {
    loading.value = false
    if (data.success) {
      list.value = data.data
      province.value = data.data[0]
      linkQuery()
    } else {
      ElMessage.error(data.message)
    }
  })
}

query()

//#endregion

//#region 城市查询
const linklist = ref([] as Array<TbCity>)
const city = ref({} as TbCity)
const linkQuery = () => {
  loading.value = true
  ApiService.get(`/link/cities/${province.value.pid}`, {}, (data: BaseDataResult<Array<TbCity>>) => {
    loading.value = false
    if (data.success) {
      linklist.value = data.data
      city.value = data.data[0]
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion
</script>
<style scoped lang="scss"></style>
